<template>
  <div class="main">
    <div class="leftCategory">
      <p class="categoryCss">
      <div>分类</div>
      <div class="categoryIconCss">
        <el-icon>
          <Refresh @click="loadTreeData" />
        </el-icon>
        <el-icon>
          <Plus @click="openCategorySave" />
        </el-icon>
        <el-icon>
          <Minus @click="removeCategory" />
        </el-icon>
      </div>
      </p>
      <el-tree class="scopeCss" :data="treeData" default-expand-all highlight-current :expand-on-click-node="false"
        @node-click="leftClick" />
    </div>
    <div class="rightContent">
      <div>
        <el-form :inline="true" :model="search" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="search.name" placeholder="名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadData">查询</el-button>
            <el-button type="primary" @click="openSaveDiaLog">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="code" label="编码" width="100" show-overflow-tooltip>
            <template #default="scope">
              <el-link type="primary" @click="findSource(scope.row)">
                {{ scope.row.code }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="100" show-overflow-tooltip />
          <el-table-column prop="downurl" label="下载地址" min-width="120" show-overflow-tooltip />
          <el-table-column prop="isCrack" label="是否破解" width="120" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.isCrack ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="isPay" label="免费" width="120" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.isPay ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="money" label="费用" width="120" show-overflow-tooltip />
          <el-table-column prop="discount" label="折扣" width="120" show-overflow-tooltip />
          <el-table-column prop="isHot" label="推荐" width="120" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.isHot ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="isShow" label="显示" width="120" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.isShow ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="system" label="系统" width="120" show-overflow-tooltip />
          <el-table-column prop="sourceType" label="资源类型" width="120" show-overflow-tooltip>
            <template #default="scope">
              {{ findDataDictName(sourceTypeList, scope.row.sourceType) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-link type="danger" @click="removeSource(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="d-flex justify-content-center">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" small
          :page-sizes="[1, 10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="loadData" @current-change="loadData" />
      </div>
    </div>
  </div>

  <!-- 保存dialog -->
  <el-dialog v-model="sourceSaveDialog" title="Warning" width="80%" align-center :destroy-on-close="true" draggable
    @close="closeSourceSaveDialog">
    <template #header>
      <span class="dialogTitle1">保存</span>
    </template>
    <div class="dialogBody">
      <el-form :inline-message="true" ref="sourceRef" :model="source" status-icon :rules="sourceRules" label-width="80px"
        class="demo-ruleForm">
        <el-form-item label="分类" prop="categoryName" inline-message="true">
          <el-input disabled v-model="source.categoryName" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="编号" prop="code" inline-message="true">
          <el-input v-model="source.code" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="名称" prop="name" inline-message="true">
          <el-input v-model="source.name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="下载地址" prop="downurl" inline-message="true">
          <el-input v-model="source.downurl" type="text" autocomplete="off" />
        </el-form-item>
        <el-row style="display: flex;justify-content: space-between;">
          <el-form-item label="费用" prop="money" inline-message="true">
            <el-input-number :precision="1" min="0" v-model="source.money"></el-input-number>
          </el-form-item>
          <el-form-item label="折扣" prop="discount" inline-message="true">
            <el-input-number :precision="2" v-model="source.discount"></el-input-number>
          </el-form-item>
          <el-form-item label="免费" prop="isPay" inline-message="true">
            <el-radio-group v-model="source.isPay">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="推荐" prop="isHot" inline-message="true">
            <el-radio-group v-model="source.isHot">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="显示" prop="isShow" inline-message="true">
              <el-radio-group v-model="source.isShow">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属导航" prop="sourceCategory" inline-message="true">
              <el-select v-model="source.sourceCategory" clearable placeholder="Select">
                <el-option :key="1" label="java" value="1" />
                <el-option :key="2" label="资源" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="系统" prop="system" inline-message="true">
              <el-checkbox-group v-model="source.system">
                <el-checkbox label="window" />
                <el-checkbox label="mac" />
                <el-checkbox label="linux" />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="资源类别" prop="type" inline-message="true">
          <el-checkbox-group v-model="source.type">
            <el-checkbox v-for="(item, index) in sourceTypeList" :label="item.code" :key="index">
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="描述" prop="descs" inline-message="true">
          <el-input v-model="source.descs" :autosize="{ minRows: 4 }" type="textarea" />
        </el-form-item>
        <el-form-item label="说明" prop="info" inline-message="true">
          <v-md-editor v-model="source.info" height="300px"></v-md-editor>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="sourceSaveDialog = false">取消</el-button>
        <el-button type="primary" @click="saveSource">保存</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 分类 -->
  <el-dialog v-model="categoryDialog" title="Warning" width="30%" align-center destroy-on-close draggable>
    <template #header>
      <span class="dialogTitle1">保存</span>
    </template>
    <el-form :inline-message="true" ref="categoryRef" :model="category" status-icon :rules="categoryRules"
      label-width="80px" class="demo-ruleForm">
      <el-form-item label="父类" prop="pname" inline-message="true">
        <el-input disabled v-model="category.pname" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称" prop="name" inline-message="true">
        <el-input v-model="category.name" type="text" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="categoryDialog = false">取消</el-button>
        <el-button type="primary" @click="saveCategory">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios"
import { ref } from "vue"
import { findDataDict, findDataDictName } from "@/api/utils.js"
export default {
  data() {
    return {
      search: {},
      currentPage: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      treeData: [],
      sourceSaveDialog: false,
      source: {
        code: "",
        name: "",
        downurl: "",
        money: 0,
        isPay: false,
        discount: 10,
        isHot: false,
        isShow: true,
        system: [],
        type: []
      },
      sourceRules: {
        code: [{ required: true, message: "必填" }],
        name: [{ required: true, message: "必填" }],
        sourceCategory: [{ required: true, message: "必填" }]
      },
      categoryDialog: false,
      category: {},
      categoryRules: {
        name: [{ required: true, message: "必填" }]
      },
      selectCategory: {},
      selectCategoryLevel: {},
      sourceTypeList: []
    }
  },
  created() {
    this.loadData()
    this.loadTreeData()
    this.findDataDictor();
  },
  methods: {
    loadData() {
      this.$axios.post(`/source/page/${this.currentPage}/${this.pageSize}`, this.search).then(({ data }) => {
        if (data.code == 0) {
          this.tableData = data.rows
          this.total = data.total
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    openSaveDiaLog() {
      if (!this.selectCategory.id) {
        this.$message.error("请先选择分类")
        return
      }
      this.source.categoryName = this.selectCategory.label
      this.source.sourceType = this.selectCategory.id
      this.sourceSaveDialog = true
    },
    loadTreeData() {
      this.search.sourceType = null
      this.selectCategory = this.$options.data().selectCategory
      this.selectCategoryLevel = 0
      this.$axios.get(`/category/treeList?belongType=15`).then(({ data }) => {
        if (data.code == 0) {
          this.treeData = data.tree
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    openCategorySave() {
      this.category.pname = this.selectCategory.label
      this.category.pid = this.selectCategory.id
      if (this.selectCategory.pids) {
        this.category.pids = this.selectCategory.pids + "," + this.selectCategory.id
      } else {
        this.category.pids = this.selectCategory.id
      }
      this.category.level = this.selectCategoryLevel + 1 || 0
      console.log(this.category);
      this.categoryDialog = true
    },
    leftClick(seletNode, node, treeNode, nodeEvent) {
      console.log(seletNode, node.level);
      this.selectCategory = seletNode
      this.selectCategoryLevel = node.level
      this.search.sourceType = this.selectCategory.id
      // this.loadData()
    },
    saveCategory() {
      this.category.belongType = 15
      this.$axios.post(`/category/save`, this.category).then(({ data }) => {
        if (data.code == 0) {
          this.loadTreeData()
          this.categoryDialog = false
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    async removeCategory() {
      if (!this.selectCategory.id) {
        this.$message.error("未选择需要删除的分类")
        return
      }
      if (this.selectCategory.children && this.selectCategory.children.length > 0) {
        this.$message.error("无法删除存在子类的分类")
        return
      }
      let id = this.selectCategory.id
      // let {count}  = await this.$axios.get(`/source/count/${id}`); 
      // if(count>0){
      //   this.$message.error("存在数据,无法删除")
      //   return
      // }
      this.$axios.delete(`/category/removeCategory/${id}`).then(({ data }) => {
        if (data.code == 0) {
          this.loadTreeData()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    closeSourceSaveDialog() {
      // this.source =  this.$options.data().source
      this.$nextTick(() => {
        this.$refs.sourceRef.resetFields()
      })
    },
    saveSource() {
      this.$axios.post(`/source/saveSource`, this.source).then(({ data }) => {
        if (data.code == 0) {
          this.loadData()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    removeSource(row) {
      this.$confirm("确认删除？", "提示", {}).then(() => {
        this.$axios.delete(`/source/removeSource/${row.id}`).then(({ data }) => {
          if (data.code == 0) {
            this.loadData()
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {
        this.$message.info("取消")
      })
    },
    findSource(row) {
      this.$axios.get(`/source/findSource/${row.id}`).then(({ data }) => {
        if (data.code == 0) {
          this.sourceSaveDialog = true
          this.$nextTick(() => {
            data.obj.system = data.obj.system || []
            data.obj.categoryName = data.obj.sourceTypeName
            this.source = data.obj
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    findDataDictor() {
      findDataDict("sourceType").then(({ data }) => {
        if (data.code == 0) {
          this.sourceTypeList = data.map.sourceType
        }
      })
    },
    findDataDictName(list, code) {
      return findDataDictName(list, code)
    },
  },
  watch: {
    'search.sourceType': {
      deep: true,
      handler(newv, oldv) {
        this.loadData()
      }
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.main {
  display: flex;
  flex-direction: row;
  height: inherit;
}

.leftCategory {
  width: 200px;
  border-right: 1px #d6e6f5 dotted;
}

.rightContent {
  width: calc(100% - 200px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 5px;
}

div {
  /* border: 1px solid red; */
  box-sizing: border-box;
}

.categoryCss {
  display: flex;
  justify-content: space-between;
}

.categoryCss:nth-child(1) {
  padding-right: 5px;
}

.categoryIconCss .el-icon {
  margin-right: 5px;
}

.categoryIconCss .el-icon:hover {
  color: #4b97c9f8;
  cursor: pointer;
}
</style>